<template>
  <view class="niceui-flex-column width-100p">
    <view class="bg">
      <image class="login-bg-img" src="../../static/login-top.png" mode="widthFix"></image>
      <view class="logo">
        <!--替换自己的logo图片/公司名/标语-->
        <view class="logo-border niceui-flex-column">
          <image class="logo-img" src="../../static/login-logo.png" mode="widthFix"></image>
          <text class="logo-name">{{title}}</text>
          <text class="logo-name">{{slogan}}</text>
        </view>
      </view>
    </view>
    <view class="login-form">
      <view class="form-item">
        <input class="input account" type="text" placeholder="输入登录账号" placeholder-style="color:#c9c9c9;font-size:30rpx;" v-model="account" />
      </view>
      <view class="form-item">
        <input class="input password" type="password" placeholder="输入登录密码" placeholder-style="color:#c9c9c9;font-size:30rpx;" v-model="pwd" />
      </view>
      <view class="login-btns">
        <view class="btn-view login" @click="login"><text class="btn-text">员工登录</text></view>
        <view class="btn-view logins" @click="loginBtn"><text class="btn-text">回到首页</text></view>
      </view>
      <!-- <view class="login-btns">
        <view class="btn-view logins" @click="loginBtn"><text class="btn-text">回到首页</text></view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { loginSign } from '../../api/user'
export default {
  data() {
    return {
      title: "",
      slogan: "让世界遇见美好",
      account: '',
      pwd: ''
    }
  },
  methods: {
    login() {
      console.log(111111);
      if (this.account == ' ') {
        uni.showToast({
          title: '请输入登陆账号',
          duration: 1000,
        })
      } else if (this.pwd == ' ') {
        uni.showToast({
          title: '请输入登陆登录密码',
          duration: 1000,
        })
      } else {
        this.signup()
      }

    },

    async signup() {
    console.log('account',this.account);
    console.log('pwd',this.pwd);
      await loginSign({ account: this.account, pwd: this.pwd }).then(res => {
        console.log(res, '登录');
        if (res.status == 200) {

          uni.setStorageSync("token", res.data.token);
          uni.setStorageSync("uuid", res.data.id);
          uni.showToast({
            title: res.msg,
            duration: 1000,
          })
          this.account = ''
          this.pwd = ''
          setTimeout(function () {
            uni.reLaunch({
              url: '/pages/domain/domain'
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'error'
          })
        }

      })
    },
    loginBtn() {
      console.log(222222);

      uni.reLaunch({
        url: '/pages/index/index'
      });

    }
  }
}
</script>

<style>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url("https://at.alicdn.com/t/c/font_4384164_5f2pie5s8hs.ttf?t=1703254408937")
    format("truetype");
}

page,
view {
  display: flex;
}

page {
  background-color: #fff;
}

.niceui-flex-column {
  flex-direction: column;
}
.niceui-flex-row {
  flex-direction: row !important;
}
.niceui-center {
  align-items: center;
}
.niceui-between {
  justify-content: space-between;
}
.width-100p {
  width: 100%;
}
</style>
<style lang="scss" scoped>
$head-color: #cd3b33;
$white-color: #fff;
$radius: 20rpx;
$border-color: #efefef;
$color-1: #007aff;
$color-2: #4cd964;
$color-3: #f0ad4e;
$color-4: #dd524d;
$color-5: #5359af;
$list-item-height: 100rpx;
$list-margin: 20rpx;
$leftColor: #fdd447;
$rightColor: #fa886a;
.bg {
  background-image: linear-gradient(to bottom, $leftColor, $rightColor);
  height: 500rpx;
  width: 1400rpx;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -700rpx;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  flex-direction: column;
  align-items: center;
}
.login-bg-img {
  width: 100vw;
  margin-top: 22rpx;
}
.logo {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 450rpx;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
.logo-border {
  align-items: center;
}
.logo-img {
  width: 160rpx;
  border-radius: 30rpx;
  margin-top: 130rpx;
}
.logo-name {
  margin: 30rpx 0 0rpx;
  font-size: 38rpx;
  color: #fff;
  font-weight: bold;
}
.logo-slogan {
  font-size: 34rpx;
  color: #fff;
  letter-spacing: 9rpx;
}

.login-form {
  margin-top: 500rpx;
  padding: 120rpx 0 50rpx;
  flex-direction: column;
  align-items: center;
}
.form-item {
  margin: 45rpx 0 25rpx;
}
.input {
  height: 65rpx;
  line-height: 65rpx;
  width: 600rpx;
  border-bottom: solid 2px #f2f2f2;
  position: relative;
  padding-left: 60rpx;
  box-sizing: border-box;
  font-size: 36rpx;
  color: #333;
}
.input_p {
  font-size: 32rpx;
  color: #c9c9c9;
}
.account::before {
  content: "\e61d";
  font-family: texticons;
  position: absolute;
  z-index: 9;
  left: 0rpx;
  bottom: 0;
  font-size: 50rpx;
  color: #333;
}
.password::before {
  content: "\e623";
  font-family: texticons;
  position: absolute;
  z-index: 9;
  left: 0rpx;
  bottom: 0;
  font-size: 50rpx;
  color: #333;
}
.forget-pass {
  color: #c9c9c9;
  font-size: 30rpx;
  display: block;
  width: 550rpx;
  text-align: right;
}
.login-btns {
  // height: 300rpx;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btn-view {
  width: 500rpx;
  margin: 50rpx auto 0;
  border-radius: 40rpx;
  height: 90rpx;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.login {
  background-image: linear-gradient(to right, $leftColor, $rightColor);
}

.logins {
  background-image: linear-gradient(to right, $color-1, $color-5);
}
.btn-text {
  color: #fff;
  font-size: 36rpx;
}
</style>